<div th:replace="~{ app :: layout ('首页', _, ~{::#main}, _) }" xmlns:th="http://www.thymeleaf.org">
<main class="my-2rem" id="main">
    <div id="hero-content" class="d-flex flex-column align-items-center">
        <h1 class="animate__animated animate__swing animate__delay-4s">网站标题</h1>
        <p class="subtitle lead text-body-secondary"><span id="element"></span></p>
    </div>

    <div class="features">
        <div class="feature">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-lg-6 align-self-center text-center text-lg-start">
                        <h3 class="feature-title">简历</h3>
                        <p class="lead text-muted">用简短的一段描述介绍自己</p>
                    </div>
                    <div class="col-lg-6 mt-3 mt-lg-0">
                        <div class="text-center" data-aos="zoom-in">
                            <img class="img-fluid shadow" src="/img/about/resources.png" alt="简历">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="feature">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-lg-6 align-self-center text-center text-lg-end order-1 order-lg-2">
                        <h3 class="feature-title">博客</h3>
                        <p class="lead text-muted">用简短的一段描述介绍博客</p>
                    </div>
                    <div class="col-lg-6 mt-3 mt-lg-0 order-2 order-lg-1">
                        <div class="text-center" data-aos="zoom-in">
                            <img class="img-fluid shadow" src="/img/about/posts.png" alt="博客">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="feature">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-lg-6 align-self-center text-center text-lg-start">
                        <h3 class="feature-title">模块X</h3>
                        <p class="lead text-muted">用简短的一段描述介绍模块X</p>
                    </div>
                    <div class="col-lg-6 mt-3 mt-lg-0">
                        <div class="text-center" data-aos="zoom-in">
                            <img class="img-fluid shadow" src="/img/about/docs.png" alt="模块X">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="feature">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-lg-6 align-self-center text-center text-lg-end order-1 order-lg-2">
                        <h3 class="feature-title">模块Y</h3>
                        <p class="lead text-muted">用简短的一段描述介绍模块Y</p>
                    </div>
                    <div class="col-lg-6 mt-3 mt-lg-0 order-2 order-lg-1">
                        <div class="text-center" data-aos="zoom-in">
                            <img class="img-fluid shadow" src="/img/about/posts.png" alt="模块Y">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
</div>